<template>
  <div class="app-container">
    <avue-crud
      v-if="loaded"
      :option="option"
      :data="data"
      :page.sync="page"
      :table-loading="loading"
      @on-load="onLoad"
      @row-save="rowSave"
      @search-change="searchChange"
    >
      <template slot="menu" slot-scope="{type, size, row}">
        <el-button icon="el-icon-check" :size="size" :type="type" @click="$router.push({ path: '/design/table', query: { tableName: row.key } })">设计</el-button>
      </template>
    </avue-crud>
  </div>
</template>

<script>
import { getList, addTable } from '@/api/table'
import { getSystemDefine } from '@/api/design'

export default {
  data() {
    return {
      data: [
      ],
      page: {
        currentPage: 1,
        pageSize: 20
      },
      option: {},
      loaded: false,
      loading: true
    }
  },
  mounted() {
    getSystemDefine({ key: 'setting.table' }).then(res => {
      this.option = res.value
      this.$nextTick(() => {
        this.loaded = true
      })
    })
  },
  methods: {
    searchChange(params, done) {
      this.onLoad(this.page, params).then(() => done())
    },
    onLoad(page, params) {
      const { currentPage, pageSize } = page
      return getList({ page: currentPage, pageSize, ...params }).then(res => {
        this.data = res
        this.loading = false
      })
    },
    rowSave(form, done, loading) {
      loading()
      addTable(form).then(res => {
        done(res)
      })
    }
  }
}
</script>
